<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    /*
    样式的继承，给一个元素设定的样式同时会应用到后代元素之中
    发生在祖先元素与后代之间的
    继承的设计是为了方便我们的开发，利用继承通用的设置共同设计到祖先元素之中
    */
    body{
        font-size: 17px;
    }
    p{
        color: red;
        background-color: orange;
        /* 除了颜色无法继承，注意：背景相关的与布局相关的都不会被继承。 */
    }
    #box1{
        background-color: rgb(83, 226, 83);
    }
    div{
        background: yellow;
    }
    .red{
        background: red;
    }
    div{
        font-size: 20px;
    }
    *{
        font-size: 30px;
    }
    .box2{
        /* 长度单位（像素）同样的200px在不同的显示器显示效果不一样*/
        width: 200px;
        height: 200px;
        background-color: aqua;
    }
    .box3{
        /* 百分比相对于其父元素的百分比，可以使其根据父元素的改变而改变 */
        width: 50%;
        height: 50%;
        background-color: blueviolet;
    }
    .box4{
        font-size: 30px;
        /* em相对于楼上fontsize而言的 */
        /*
        em是相对于元素的字体大小来计算的，会根据字体大小的改变而变化
        rem是相对于根元素的字体大小来计算的
         */
        width: 10em;
        /* 10em是160像素，1 em=1 fontsize，会根据字体大小的改变而改变 */
        height: 10em;
        background-color: rgb(240, 161, 207);
    }
    /* 样式的冲突，通过不同的选择器选择相同的元素，并且为相同的样式设置不同的值，此时发生样式冲突 
       发生样式冲突，应用哪个样式由选择器的权重（优先级）决定
       选择器的权重
          内联样式        1，0，0，0
          id选择器        0，1，0，0
          类和伪类选择器  0，0，1，0 -思考伪类的使用是否有顺序要求visited\hover\active
          元素选择器      0，0，0，1
          统配选择器      0，0，0，0
          继承选择器      没有优先级
        比较优先级时，将选择器的优先级进行相加，最后优先级越高，则优先级显示（分组原则器是单独计算的）
        选择器的累加不会超过最大的数量级，类选择器相加越多也不会超过类选择器
        如果优先级计算相同，则优先使用靠下的样式
    */
</style>
</head>
<body>
    <p>
        我是一个p元素
        <span>我是p元素中的span</span>
    </p>
    <span>我是p元素外的span元素</span>
    <div>
        我是div
        <span>我是div中的span
            <em>我是span中的em</em>
        </span>
    </div>
    <dix id="box1" class="red">我是一个div<span>我是div中的span</span></dix>
    <!-- 
        选择器的权重
     -->
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>
</html>